<template>
	<view class="all">
		<scroll-view class="kexuanjishiqi" :scroll-x="true">
			<view class="quanbujishiqi">
				<view v-for="(item,index) in jishiqi" class="dange">
				<image   class="tupian" :src=item  @click="click(index)" :style="{border:borders[index]}" />
			   </view>
			</view>
		</scroll-view>
		<button class="genhuanjishiqi" @click="genggaijishiqi">更改计时器</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jishiqi:["/static/jsq1.jpg","/static/jsq2.jpg","/static/jsq3.jpg","/static/jsq4.jpg"],
				borders:["","","",""],
				index:0,
				zhang:""
			}
		},
		created(){
			this.zhang=getApp().globalData.zhang
		},
		methods: {
			click(index){
				this.index=index
				this.borders.forEach((item,indexx)=>{
					if(indexx!=index)
					  this.$set(this.borders,indexx,"") 
				})
			if(this.borders[index]=="")
			  this.borders[index]="2rpx solid red"
			
			},
			genggaijishiqi(){
				uni.request({
					 url:"http://localhost:8080/jbgn/gaijishiqi",
					 data:{zhang:this.zhang,jishiqi:this.index}
				})
			}
		}
	}
</script>

<style>
.all{
		position: absolute;
		width: 380rpx;
		height:350rpx ;
		left: 120rpx;
		top: 0rpx;
	}
	.kexuanjishiqi{
		margin-top: 60rpx;
		margin-left: 50rpx;
		width: 250rpx;
		height: 100rpx;
	
		white-space: nowrap;
	}
	.quanbujishiqi{
			display: flex;
		flex-direction: row;
		align-items: center;
	}
	.dange{
		width: 150rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
	}
	.tupian{
		width: 140rpx;
		height: 90rpx;
	
	}
	.genhuanjishiqi{
	   width: 130rpx;
	   height: 60rpx;
	   margin-top: 30rpx;
	   line-height:60rpx ;
	}
</style>
